<template>
	<view class="order-box">
		<view class="order" v-for="(list, i) in goodsInfo" :key="list.shop.id">
			<view class="order-cate">
				<view class="order-title">
					{{isRefund ? '退款信息' : list.shop.name}}
				</view>
			</view>
			<view class="item-box" v-for="(item, index) in list.items" :key="item.goods.id">
				<view class="item">
					<view class="pic">
						<image class="thumbnail" :src="item.goods.thumbnail ? item.goods.thumbnail : item.goods.goods_thumbnail" mode="aspectFill"></image>
						<view v-if="item.not_send" class="not-send">
							<image class="warn" src="../../static/images/warn.svg" mode="aspectFill"></image>
							<text class="txt">不在配送范围</text>
						</view>
					</view>
					<view class="order-content">
						<view class="good-name">{{item.goods.goods_title}}</view>
						<view class="good-sku-name">{{item.goods.title}}</view>
						<view class="good-foot">
							<view class="flex-center" v-if="item.goods.activity_price > 0">
								<goods-price :price="item.goods.activity_price"></goods-price>
								<view class="good-return">可免单¥{{(item.goods.activity_price * item.back_self_ratio / 100 / 100 ).toFixed(2)}}</view>
							</view>
							<view class="flex-center" v-else>
								<template v-if="isLeader">
									<goods-price :price="item.goods.share_price"></goods-price>
								</template>
								<template v-else>
									<goods-price :price="item.goods.sale_price"></goods-price>
								</template>
								<view class="good-return">可免单¥{{isLeader ? (item.goods.share_price * item.back_self_ratio / 100 /100 ).toFixed(2) : (item.goods.sale_price * item.back_self_ratio / 100 /100 ).toFixed(2)}}</view>
							</view>
							<view class="good-number">x{{item.count}}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <slot></slot> -->
		</view>
	</view>
</template>

<script>
	export default {
		name: 'order-goods',
		props: {
			goodsInfo: {
				type: Array,
				default: []
			},
			isRefund: { // 是否展示退款
				type: Boolean,
				dafault: false
			},
			isLeader: {
				type: Boolean,
				dafault: false
			}
		},
		data () {
			return {
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order {
		width: 100%;
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 32rpx 22rpx;
		box-sizing: border-box;
		margin-bottom: 24rpx;
		.flex-center {
			display: flex;
			align-items: center;
		}
		.order-cate {
			display: flex;
			align-items: center;
			.order-title {
				color: #2E2E2E;
				font-size: 28rpx;
				line-height: 44rpx;
			}
		}
		.uni-swipe {
			width: 100%;
			height: 180rpx;
			margin-bottom: 32rpx;
		}
		.item-box {
			height: 180rpx;
			margin-top: 32rpx;
		}
		.item {
			display: flex;
			width: 100%;
			height: 180rpx;
			position: relative;
			.pic {
				margin-right: 20rpx;
				position: relative;
				width: 225rpx;
				height: 180rpx;
				.not-send {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					border-radius: 16rpx;
					background-color: rgba(0,0,0, .5);
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					.warn {
						width: 48rpx;
						height: 48rpx;
						margin-bottom: 10rpx;
					}
					.txt {
						color: #ffffff;
						font-size: 28rpx;
					}
				}
				.thumbnail {
					width: 225rpx;
					height: 180rpx;
					border-radius: 16rpx;
				}
			}
			.order-content {
				flex: 1;
				overflow: auto;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.good-name {
					height: 64rpx;
					color: #000;
					font-size: 24rpx;
					line-height: 32rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical 
				}
				.good-sku-name {
					height: 40rpx;
					color: #969799;
					font-size: 24rpx;
					line-height: 40rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.good-return {
					padding: 0 8rpx;
					box-sizing: border-box;
					background: rgba(252, 73, 81, 0.1);
					font-size: 24rpx;
					font-weight: normal;
					line-height: 36rpx;
					height: 36rpx;
					color: #FC4951;
					border-radius: 4rpx;
					display: inline-block;
					margin-left: 10rpx;
				}
				.good-foot {
					 display: flex;
					 justify-content: space-between;
					 align-items: center;
					 .good-number {
						 color: #2E2E2E;
						 font-size: 28rpx;
						 line-height: 32rpx;
					 }
				 }
			}
		}
	}
</style>